<template>
  <div id="main">
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="rows in swipeList" :key="rows.id"
        ><van-image
          width="100%"
          height="100%"
          fit="cotain"
          :src="'http://liufusong.top:8080' + rows.imgSrc"
        />
      </van-swipe-item>
    </van-swipe>
    <!-- 搜索框 -->
    <SearchBox :cname="$store.state.currentcity"/>
    <!-- 导航栏 -->
    <van-grid class="nav-grid" >
      <van-grid-item icon="wap-home-o" text="整租" />
      <van-grid-item icon="friends-o" text="合租" />
      <van-grid-item icon="location-o" text="地图找房" />
      <van-grid-item icon="home-o" text="去出租" @click="$router.push('/rent')"/>
    </van-grid>
    <!-- 分类 -->
    <div class="group">
      <h3 class="group-title">租房小组<span class="more">更多</span></h3>
      <van-grid :column-num="2" direction="horizontal">
        <van-grid-item v-for="item in groupList" :key="item.id"
          ><van-image :src="'http://liufusong.top:8080'+item.imgSrc"
        /><h3 style="paddingLeft:5px">{{item.title}}<span style="fontSize:15px;fontWeight:300">{{item.desc}}</span></h3>
          </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
import { getGruops, getSwiperImg } from '@/api/home'
import SearchBox from '@/components/SearchBox.vue'
export default {
  // vdom生成后获取轮播图图片和租房小组内容
  async created () {
    const { body } = await getSwiperImg()
    this.swipeList = body
    const res = await getGruops()
    this.groupList = res.body
  },
  data () {
    return {
      swipeList: [],
      value: '',
      groupList: []
    }
  },
  components: {
    SearchBox
  }
}
</script>

<style lang="less" scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  text-align: center;
  background-color: #39a9ed;
}
.am-flexbox.am-flexbox-align-center {
  align-items: center;
}
.search-box {
  position: absolute;
  top: 25px;
  width: 95%;
  padding: 0 10px;
  z-index: 2;
}
.am-flexbox.am-flexbox-align-center {
  align-items: center;
}
.search-box .search {
  flex: 1 1;
  height: 34px;
  margin: 0 10px;
  padding: 5px 5px 5px 8px;
  border-radius: 3px;
  background-color: #fff;
}
.am-flexbox {
  text-align: left;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.search-box .search .form {
  border-left: 1px solid #e5e5e5;
  margin-left: 12px;
  line-height: 16px;
}
#main {
  background-color: #f6f5f6;
}
.nav-grid {
  margin-top: -46px;
}
.rent-group {
  padding: 20px 5px;
}
.group {
  background-color: #f6f5f6;
  overflow: hidden;
  padding: 0 10px;
  .group-title {
    position: relative;
    margin: 15px 0 15px 10px;
    font-size: 15px;
    .more {
      color: #787d82;
      position: absolute;
      right: 0;
      font-size: 14px;
      font-weight: 400;
    }
  }
}
</style>
